// 商品详情页

<template>
  <div>
    <div class="Details-header">
      <span class="iconfont text" @click="back">&#xe601;</span>
      <span class="text2">商品详情</span>
      <span class="iconfont text">&#xe62b;</span>
    </div>
    <div class="content">
      <img
        :src="goodsCoverImg"
        alt=""
        class="content-img"
      />
      <div class="content-title">
       {{goodsName}}
      </div>
      <div class="content-desc">免邮费 顺丰快递</div>
      <div class="content-pirce">¥{{sellingPrice}}</div>
      <ul>
        <li>概述</li>
        <li>参数</li>
        <li>安装服务</li>
        <li>常见问题</li>
      </ul>
     <div class="div-img" v-html="goodsDetailContent || ''"></div>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" badge="5" @click="onClickIcon"/>
      <van-goods-action-button type="warning" text="加入购物车"  @click="handleAddCart"/>
      <van-goods-action-button type="danger" text="立即购买"  @click="onClickButton"/>
    </van-goods-action>
  </div>
</template>

<script>
import { Toast } from 'vant'
import {addCart, getDetail} from '@/api/api'
// import PubSub from 'pubsub-js'
export default {
  data () {
    return {
      id: '',
      goodsCoverImg: '',
      goodsName: '',
      sellingPrice: '',
      goodsDetailContent: ''

    }
  },
  beforeCreate () {
    // 取出localStorage的商品id
    this.id = localStorage.getItem('Id')
    console.log(this.id)
    getDetail(this.id).then((res) => {
      console.log(res, '123')
      this.goodsCoverImg = res.data.data.goodsCoverImg
      this.goodsName = res.data.data.goodsName
      this.sellingPrice = res.data.data.sellingPrice
      this.goodsDetailContent = res.data.data.goodsDetailContent
    })
  },
  methods: {
    back () {
      this.$router.push('/')
    },
    onClickIcon () {
      Toast('点击图标')
    },
    onClickButton () {
    // 立即购买
    },
    handleAddCart () {
      // 接收数据
      this.id = localStorage.getItem('Id')
      const params = { goodsCount: 1, goodsId: this.id }
      // 请求加入购物车的后台接口
      addCart(params).then((res) => {
        console.log(res)
      })
    }
  }
}
</script>

<style lang="less">
.Details-header {
  width: 100%;
  height: 1rem;
  border-bottom: 1px solid #f7f8f8;
  line-height: 1.2rem;
  display: flex;
  text-align: center;
  .text {
    width: 10%;
  }
  .text2 {
    width: 80%;
  }
}
.content {
  padding: 0 0.2rem;
  .content-img {
    width: 100%;
    height: 8.5rem;
  }
  .content-title {
    font-size: 0.4rem;
    line-height: 0.5rem;
  }
  .content-desc {
    font-size: 0.3rem;
    color: #999;
    margin-top: 0.2rem;
  }
  .content-pirce {
    font-size: 0.6rem;
    color: #f63515;
    margin-top: 0.2rem;
  }
  ul {
    margin-top: 0.5rem;
    display: flex;
    li {
      width: 25%;
      text-align: center;
      font-size: 0.35rem;
    }
  }
  .div-img {
    img{
       width: 100%;
    }

  }
}
</style>
